<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['id']"/>
        </a-form-item>
        <a-form-item
          :wrapperCol="infoWrapperCol"
        >
          <a-alert
            description="新用户的默认密码为admin123456"
            type="info"
            show-icon
          />
        </a-form-item>
        <a-form-item
          label="用户名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入用户名" v-decorator="['username', {rules: [{required: true, message: '请输入用户名！'}]}]"/>
        </a-form-item>
        <a-form-item
          label="姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入姓名" v-decorator="['nickname', {rules: [{required: true, message: '请输入姓名！'}]}]"/>
        </a-form-item>
        <a-form-item
          label="角色"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-row :gutter="24">
            <a-col :md="18" :sm="24">
              <a-select style="width: 100%" placeholder="请选择角色"
                        v-decorator="['role', {rules: [{ required: false, message: '请选择角色！' }]}]">
                <a-select-option v-for="(item,index) in roles" :key="index" :value="item.id">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="link">
                新建角色
              </a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import * as api from '@/api/system/userManage'
  import { getPage } from '@/api/system/roleManage'
  // 导入提示信息字典
  import config from '@/config/dict'

  export default {
    name: 'sForm',
    data() {
      return {
        labelCol: {
          xs: { span: 10 },
          md: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          md: { span: 17 }
        },
        infoWrapperCol: {
          xs: { span: 24 },
          md: { span: 20, offset: 3 }
        },
        visible: false,
        title: '',
        confirmLoading: true,
        roles: [],
        pwdShow: true,
        passwordRequired: true,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法
      open(record) {
        this.get_roles()
        this.visible = true
        if (record) {
          this.title = '编辑账户'
          this.pwdShow = false
          this.passwordRequired = false
          setTimeout(() => {
            this.setUserItem(record)
            this.confirmLoading = false
          }, 100)
        } else {
          this.title = '新增账户'
          this.confirmLoading = false
        }
      },
      setUserItem(record) {
        this.form.setFieldsValue(
          {
            id: record.id,
            username: record.username,
            nickname: record.nickname,
            role: record.role,
            email: record.email
          }
        )
      },
      // 获取所有的角色
      get_roles() {
        getPage().then(res => {
          this.roles = res.data.rows
        })
      },
      // [确认按钮]提交数据方法
      handleSubmit() {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          this.message = config.msgDict[0]
          if (!errors) {
            this.confirmLoading = false
            if (values.id) {
              this.message = config.msgDict[1]
              api.updateObj(values).then((res) => {
                this._handle_response(res, values)
              }).finally((res) => {
                this.confirmLoading = false
              })
            } else {
              api.addObj(values).then((res) => {
                this._handle_response(res, values)
              }).finally((res) => {
                this.confirmLoading = false
              })
            }
          } else {
            this.confirmLoading = false
          }
        })
      },
      // 处理返回消息
      _handle_response(res, values) {
        if (!res.error) {
          this.$message.success(this.message['success'])
          this.handleCancel()
          this.$emit('ok', values)
        } else {
          this.$message.error(this.message['failed'] + res.error)
        }
      },
      // [取消按钮]重置数据,关闭弹框
      handleCancel() {
        this.form.resetFields()
        this.confirmLoading = true
        this.visible = false
      }
    }
  }
</script>
